<template>
  <view class="language-container">
    <!-- 导航栏 -->
    <up-navbar :title="pageTitle" bg-color="#ffffff" :border="false" :safeAreaInsetTop="true" title-color="#333333" autoBack placeholder></up-navbar>

    <!-- 语言列表 -->
    <view class="language-list">
      <view class="language-item" v-for="language in languageList" :key="language.value" @click="selectLanguage(language)">
        <view class="language-info">
          <text class="language-name">{{ language.nativeName || language.name }}</text>
        </view>
        <view class="language-check" v-if="currentLanguage === language.value">
          <u-icon name="checkmark" size="40rpx" color="#12C284"></u-icon>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { getLangTypeList } from '@/api/language.js';
import { useUserStore } from '@/stores/user.js';
import { getCurrentLanguage, switchLanguage, useT } from '@/utils/i18n';
import { onMounted, ref } from 'vue';
// 用户状态
const userStore = useUserStore();

// 当前语言
const currentLanguage = ref('zh-CN');

// 语言列表
const languageList = ref([]);

// 页面标题
const pageTitle = useT('语言切换');

// 获取语言列表
const fetchLanguageList = async () => {
  try {
    const response = await getLangTypeList();
    if (response && response.data) {
      languageList.value = response.data;
    }
  } catch (error) {
    console.error('获取语言列表失败:', error);
    uni.showToast({
      title: '获取语言列表失败',
      icon: 'none'
    });
  }
};

// 选择语言
const selectLanguage = async (language) => {
  if (language.value === userStore.currentLanguage) {
    return;
  }

  try {
    // 使用 i18n 的切换语言功能
    await switchLanguage(language.value);
    currentLanguage.value = language.value;

    uni.showToast({
      title: useT('语言切换成功'),
      icon: 'success',
      duration: 1500
    });

    // 延迟返回上一页
    setTimeout(() => {
      goBack();
    }, 1500);
  } catch (error) {
    console.error('切换语言失败:', error);
    uni.showToast({
      title: '切换失败，请重试',
      icon: 'error'
    });
  }
};

// 返回上一页
const goBack = () => {
  uni.navigateBack();
};

// 页面加载时获取当前语言和语言列表
onMounted(() => {
  currentLanguage.value = getCurrentLanguage();
  fetchLanguageList();
});
</script>

<style lang="scss" scoped>
.language-container {
  min-height: 100vh;
  background: #ffffff;
}

.back-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 80rpx;
  height: 80rpx;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
}

.language-list {
  padding: 40rpx 0;
}

.language-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 40rpx 60rpx;
  border-bottom: 1rpx solid rgba(0, 0, 0, 0.1);

  &:last-child {
    border-bottom: none;
  }

  &:active {
    background: rgba(18, 194, 132, 0.05);
  }
}

.language-info {
  display: flex;
  flex-direction: column;
}

.language-name {
  font-size: 32rpx;
  font-weight: 500;
  color: #333333;
}

.language-check {
  display: flex;
  align-items: center;
  justify-content: center;
}
</style>
